<template>
  <div v-if="userInfo.uid">
    <g-user-bar :userInfo="userInfo"></g-user-bar>
    <g-head></g-head>
    <div class="body">
      <g-left-nav></g-left-nav>
      <div class="body_right">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item v-for="(child,n) in breadcrumb" :key="n">{{child}}</el-breadcrumb-item>
        </el-breadcrumb>
        <transition name="router-fade" mode="out-in">
          <keep-alive>
            <router-view v-if="$route.meta.keepAlive" class="main cl"></router-view>
          </keep-alive>
        </transition>
        <transition name="router-fade" mode="out-in">
          <router-view v-if="!$route.meta.keepAlive" class="main cl"></router-view>
        </transition>
      </div>
    </div>
    <g-foot></g-foot>
  </div>
</template>

<script>
  import {mapActions, mapState, mapMutations} from 'vuex'
  import gHead from '@/components/header/head'
  import gFoot from '@/components/footer/foot'
  import gLeftNav from '@/components/leftNav/leftNav'
  import gUserBar from '@/components/header/userBar'
  import menuUrl from '@/router/menuUrl'
  // 获取所有父节点
  const getParents = function (arr, target) {
    var result = []
    for (let i in arr) {
      result.push(arr[i].id)
      if (arr[i].id === target) {
        return result
      } else if (arr[i].child) {
        var arr2 = getParents(arr[i].child, target)
        if (arr2.length) {
          result = result.concat(arr2)
          return result
        } else {
          result = []
        }
      } else {
        result = []
      }
    }
    return result
  }
  export default{
    data () {
      return {
        pageLoading: true
      }
    },
    async mounted () {
      await this.getUserInfo()
      await this.getMenu()
      this.initNav()
    },
    components: {
      gHead,
      gLeftNav,
      gFoot,
      gUserBar
    },
    computed: {
      ...mapState(['userInfo', 'menu', 'lv2MenuId', 'lv3MenuId', 'breadTail']),
      breadcrumb: function () {
        const menu = this.menu
        const lv2Id = this.lv2MenuId
        const lv3Id = this.lv3MenuId
        const arr = []
        if (menu) {
          arr.push(menu[lv2Id].name)
          arr.push(menu[lv2Id].child[lv3Id].name)
        }
        this.breadTail && arr.push(this.breadTail)
        return arr
      }
    },
    methods: {
      ...mapActions(['getUserInfo', 'getMenu']),
      ...mapMutations(['SET_LV2_MENU', 'SET_LV3_MENU', 'SET_LV3_ID']),
      initNav () {
        const index = this.mapRouteToIndex(this.$route.name)
        if (index) {
          const menuIds = getParents(this.menu, +index)
          this.SET_LV2_MENU(menuIds[0])
          this.SET_LV3_MENU(menuIds[1])
          menuIds[2] && this.SET_LV3_ID(menuIds[2])
        }
      },
      mapRouteToIndex (name) {
        for (let i in menuUrl) {
          if (menuUrl[i].name === name) {
            return i
          }
        }
      }
    }
  }
</script>
<style lang="scss">
  .router-fade-enter-active, .router-fade-leave-active {
      transition: all .3s;
  }
  .router-fade-enter {
    transform:translateX(-12px);
    opacity:0;
  }
  .router-fade-leave-active{
    opacity:0;
  }
</style>
